<template>
  <!-- 个人用户资料上传 -->
  <div class="large pl-2 pt-5 pb-5 text-2xl">{{$t('必填信息')}}</div>
  <el-form :model="personalUserForm" label-width="150px">
    <el-form-item :label="$t('真实姓名')" required>
      <el-input v-model="personalUserForm.real_name" :placeholder="$t('请输入真实姓名')" clearable style="width:300px;" />
    </el-form-item>
    <el-form-item :label="$t('联系方式')" required>
      <el-input v-model="personalUserForm.contact" :placeholder="$t('请输入联系方式')" clearable style="width:300px;"/>
    </el-form-item>
    <el-form-item :label="$t('个人证件照')" required>
      <!-- :action="config.img_upload" -->
      <div class="el-upload--picture-card el-upload-list el-upload-list--picture-card"
        v-if="personalUserForm.file_idcard_front && !fileIdcardFrontBtn">
        <div class="el-upload-list__item is-success">
          <img class="el-upload-list__item-thumbnail" :src="personalUserForm.file_host + personalUserForm.file_idcard_front
            " alt="" />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-delete" @click="handleRemove(personalUserForm.file_idcard_front, '正面')">
              <el-icon>
                <Delete />
              </el-icon>
            </span>
          </span>
        </div>
      </div>
      <el-upload ref="fileIdcardFrontRef" :class="{ front_box: fileIdcardFrontBtn }" :action="config.img_upload"
        list-type="picture-card" v-else :limit="1"
         :on-success="handleFrontImgSuccess"
         :headers="TOKENT_HEADER"
         :on-change="(file) => {handleChange(file, '正面');}">
        <el-icon>
          <Plus />
        </el-icon>
        <div>{{$t('请上传个人证件正面图片')}}</div>
        <template #file="{ file }">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-delete" @click="handleRemove(file, '正面')">
                <el-icon>
                  <Delete />
                </el-icon>
              </span>
            </span>
          </div>
        </template>
      </el-upload>
      <div class="uploadDiv" />
      <div class="el-upload--picture-card el-upload-list el-upload-list--picture-card"
        v-if="personalUserForm.file_idcard_back && !fileIdcardBackBtn">
        <div class="el-upload-list__item is-success">
          <img class="el-upload-list__item-thumbnail" :src="personalUserForm.file_host + personalUserForm.file_idcard_back
            " alt="" />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-delete" @click="handleRemove(personalUserForm.file_idcard_back, '反面')">
              <el-icon>
                <Delete />
              </el-icon>
            </span>
          </span>
        </div>
      </div>
      <el-upload ref="fileIdcardBackRef" :class="{ back_box: fileIdcardBackBtn }" :action="config.img_upload"
        list-type="picture-card"
        :headers="TOKENT_HEADER"
        :on-success="handleBackImgSuccess" v-else :limit="1"
        :on-change="(file) => {handleChange(file, '反面');}">
        <el-icon>
          <Plus />
        </el-icon>
        <div>{{$t('请上传个人证件背面图片')}}</div>
        <template #file="{ file }">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-delete" @click="handleRemove(file, '反面')">
                <el-icon>
                  <Delete />
                </el-icon>
              </span>
            </span>
          </div>
        </template>
      </el-upload>
      <div class="uploadDiv" />
      <div class="el-upload--picture-card el-upload-list el-upload-list--picture-card"
        v-if="personalUserForm.file_idcard_hand && !fileIdcardHandBtn">
        <div class="el-upload-list__item is-success">
          <img class="el-upload-list__item-thumbnail" :src="personalUserForm.file_host + personalUserForm.file_idcard_hand
            " alt="" />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-delete" @click="handleRemove(personalUserForm.file_idcard_hand, '手持')">
              <el-icon>
                <Delete />
              </el-icon>
            </span>
          </span>
        </div>
      </div>

      <el-upload ref="fileIdcardHandRef" :class="{ hand_box: fileIdcardHandBtn }" :action="config.img_upload"
        list-type="picture-card" v-else
        :headers="TOKENT_HEADER"
        :on-success="handleHandImgSuccess" :limit="1"
        :on-change="(file) => {handleChange(file, '手持');}">
        <el-icon>
          <Plus />
        </el-icon>
        <div>{{$t('请上传手持证件图片')}}</div>
        <template #file="{ file }">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-delete" @click="handleRemove(file, '手持')">
                <el-icon>
                  <Delete />
                </el-icon>
              </span>
            </span>
          </div>
        </template>
      </el-upload>
    </el-form-item>
  </el-form>
  <!-- 个人用户提交按钮 -->
  <div class="flex mt-5" style="margin-left:150px">
    <el-button type="primary" :icon="SuccessFilled" @click="handleSubmit" class="w-60"
      v-if="personalUserForm.mer_review_status === 0 || personalUserForm.mer_review_status === 2">
      {{$t('提交审核')}}
    </el-button>
    <el-button type="warning" :icon="EditPen" @click="handleSave"
      v-if="personalUserForm.mer_review_status === 0 || personalUserForm.mer_review_status === 2">
      {{$t('保存')}}
    </el-button>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { config, TOKENT_HEADER } from "@/config/index";
import { Plus, Delete, EditPen, SuccessFilled } from '@element-plus/icons-vue'
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const fileIdcardFrontRef = ref(); //身份证正面Ref 用于清楚删除操作
const fileIdcardBackRef = ref(); //身份证反面Ref 用于清楚删除操作
const fileIdcardHandRef = ref(); //手持身份证Ref 用于清楚删除操作
const fileIdcardFrontBtn = ref(false); //身份证正面class 用于上传以后隐藏上传按钮
const fileIdcardBackBtn = ref(false); //身份证反面class 用于上传以后隐藏上传按钮
const fileIdcardHandBtn = ref(false); //手持身份证class 用于上传以后隐藏上传按钮

const props = defineProps({
  personalUserForm: {
    type: Object,
    default: {
      account_type: 2,
      real_name: "",
      contact: "",
      file_idcard_front: "",
      file_idcard_back: "",
      file_idcard_hand: "",
    },
  },
});
const emits = defineEmits(["submitPersonalUserForm", "thatPersonSubmit"]);

const checkValue = () => {
  let value = false;
  if (!props.personalUserForm.real_name) {
    ElMessage({
      message: t("请输入真实姓名"),
      type: "error",
    });
    return (value = false);
  }

  if (!props.personalUserForm.contact) {
    ElMessage({
      message: t("请输入联系方式"),
      type: "error",
    });
    return (value = false);
  }
  if (!props.personalUserForm.file_idcard_front) {
    ElMessage({
      message: "请上传个人证件正面图片",
      type: "error",
    });
    return (value = false);
  }
  if (!props.personalUserForm.file_idcard_back) {
    ElMessage({
      message: "请上传个人证件反面图片",
      type: "error",
    });
    return (value = false);
  }
  if (!props.personalUserForm.file_idcard_hand) {
    ElMessage({
      message: "请上传手持证件图片",
      type: "error",
    });
    return (value = false);
  }
  if (
    props.personalUserForm.real_name &&
    props.personalUserForm.contact &&
    props.personalUserForm.file_idcard_front &&
    props.personalUserForm.file_idcard_back &&
    props.personalUserForm.file_idcard_hand
  ) {
    return (value = true);
  }
  // console.log(value);
  return value;
};

// 保存
const handleSave = () => {
  if (checkValue()) {
    emits("submitPersonalUserForm", props.personalUserForm);
  }
};
// 提交
const handleSubmit = () => {
  if (checkValue()) {
    emits("thatPersonSubmit", props.personalUserForm);
  }
};

// 个人证件正面照片上传成功
const handleFrontImgSuccess = (res) => {
  if (res.code === 0) {
    ElMessage({
      message: "图片上传成功",
      type: "success",
    });

    props.personalUserForm.file_idcard_front = res.data.name;
  }
};
// 个人证件反面照片上传成功
const handleBackImgSuccess = (res) => {
  if (res.code === 0) {
    ElMessage({
      message: "图片上传成功",
      type: "success",
    });
    props.personalUserForm.file_idcard_back = res.data.name;
  }
};
// 个人证件手持上传成功
const handleHandImgSuccess = (res) => {
  if (res.code === 0) {
    ElMessage({
      message: "图片上传成功",
      type: "success",
    });
    props.personalUserForm.file_idcard_hand = res.data.name;
  }
};
const handleChange = (file, type) => {
  // console.log(file);
  switch (type) {
    case "正面":
      fileIdcardFrontBtn.value = true;
      break;
    case "反面":
      fileIdcardBackBtn.value = true;
      break;
    case "手持":
      fileIdcardHandBtn.value = true;
      break;
  }
};
const handleRemove = (file, type) => {
  switch (type) {
    case "正面":
      fileIdcardFrontRef.value ? fileIdcardFrontRef.value.clearFiles() : "";
      fileIdcardFrontBtn.value = false;
      props.personalUserForm.file_idcard_front = "";
      break;
    case "反面":
      fileIdcardBackRef.value ? fileIdcardBackRef.value.clearFiles() : "";

      fileIdcardBackBtn.value = false;
      props.personalUserForm.file_idcard_back = "";
      break;
    case "手持":
      fileIdcardHandRef.value ? fileIdcardHandRef.value.clearFiles() : "";

      fileIdcardHandBtn.value = false;
      props.personalUserForm.file_idcard_hand = "";
      break;
  }
};
</script>
<style scoped>
:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-upload-list--picture-card) {
  width: 192px;
  height: 112px;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 192px;
  height: 112px;
}

:deep(.el-upload--picture-card) {
  width: 192px;
  height: 112px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

:deep(.front_box .el-upload--picture-card) {
  display: none;
}

:deep(.back_box .el-upload--picture-card) {
  display: none;
}

:deep(.hand_box .el-upload--picture-card) {
  display: none;
}

.uploadDiv {
  margin-right: 30px;
}
</style>
